<template>
  <Suspense>
    <template #default>
      <router-view v-slot="{ Component, route }">
        <keep-alive>
          <component :is="Component" v-if="route.meta && route.meta.keepAlive" :key="route.meta.usePathKey ? route.fullPath : undefined" />
        </keep-alive>
        <component :is="Component" v-if="!(route.meta && route.meta.keepAlive)" :key="route.meta.usePathKey ? route.fullPath : undefined" />
      </router-view>
    </template>
    <template #fallback> Loading... </template>
  </Suspense>
</template>
<script setup>
const screenWidth = ref(document.body.clientWidth)
window.onresize = () => {
  return (() => {
    screenWidth.value = document.body.clientWidth
  })()
}
watch(
  () => screenWidth.value,
  (val, oldVal) => {
    console.log(val, 123)
    if ((val >= 800 && oldVal < 800) || (val < 800 && oldVal >= 800)) {
      console.log('设备类型发生变化，重新加载...')
      location.reload()
    }
  }
)
</script>
